<template>
  <div class="bg_a">
        <!-- 头部 -->
        <div class="top_head" style="z-index: 998; position: relative; top: 0px;">
            <div class="move_box">
                <i class="moves1a i_move_t" style="bottom: -8px; top: auto;"></i>
            </div>
            <div class="logo_t">
                <img :src="require('@/assets/images/taxation/logo.png')" />
            </div>
            <ul class="head_nav head_nav_l clear">
                <li class="on">
                    <a href="#">房地产行业</a>
                    <dl>
                        <dd>
                            <a><span>企业分析</span></a>
                        </dd>
                        <dd>
                            <a><span>项目分析</span></a>
                        </dd>
                        <dd>
                            <a><span>交易分析</span></a>
                        </dd>
                        <dd>
                            <a><span>纳税分析</span></a>
                        </dd>
                        <dd class="on">
                            <a><span>风控分析</span></a>
                        </dd>
                    </dl>
                </li>
                <li>
                    <a href="#">建筑安装行业</a>
                    <dl>
                        <dd>
                            <a><span>企业分析</span></a>
                        </dd>
                        <dd>
                            <a><span>项目分析</span></a>
                        </dd>
                        <dd>
                            <a><span>纳税分析</span></a>
                        </dd>
                        <dd>
                            <a><span>中标分析</span></a>
                        </dd>
                        <dd>
                            <a><span>风控分析</span></a>
                        </dd>
                    </dl>
                </li>
            </ul>
            <ul class="head_nav head_nav_r clear">
                <li>
                    <a>数据存储与治理</a>
                </li>
                <li>
                    <a>系统使用与成效</a>
                </li>
            </ul>
        </div>
        <div class="zhe_top"></div>
        <div class="top_btn_con">
            <a href="#">
                <img :src="require('@/assets/images/taxation/icon_top_xitong.png')">
                <p>管理系统</p>
            </a>
            <a href="#">
                <img :src="require('@/assets/images/taxation/icon_top_logout.png')">
            </a>
        </div>
        <baidu-map
            class="bm-viewbm-view"
            :center="center"
            :zoom="zoom"
            :scroll-wheel-zoom="true"
            @ready="handler"
            :mapStyle="mapStyle"
        >
        </baidu-map>
        <!-- 头部end -->
        <div class="box_pad">
            <div class="top_data_cen">
                <div class="b_com" style="width: 43%;">
                    <div class="sel_ksbox">
                        <div class="ks_groub">
                            <span>时间</span>
                            <select>
                                <option selected>2018-09</option>
                                <option>2018-10</option>
                                <option>2018-11</option>
                                <option>2018-12</option>
                                <option>2019-01</option>
                                <option>2019-02</option>
                                <option>2019-03</option>
                                <option>2019-04</option>
                                <option>2019-05</option>
                            </select>
                            <span>-</span>
                            <select>
                                <option>2018-09</option>
                                <option>2018-10</option>
                                <option>2018-11</option>
                                <option>2018-12</option>
                                <option>2019-01</option>
                                <option>2019-02</option>
                                <option>2019-03</option>
                                <option>2019-04</option>
                                <option selected>2019-05</option>
                            </select>
                        </div>
                        <div class="ks_groub mL10">
                            <span>企业所属地区</span>
                            <select>
                                <option selected>全市</option>
                                <option>全市</option>
                                <option>全市</option>
                            </select>
                        </div>
                    </div>
                    <dl>
                        <dd>
                            <div class="b_com_al">
                                <img :src="require('@/assets/images/taxation/icon_sj_fk1.png')" />
                            </div>
                            <div class="b_com_ar">
                                <p><b>1286</b><sub>个</sub></p>
                                <span>涉嫌异常纳税人数量</span>
                            </div>
                        </dd>
                        <dd>
                            <div class="b_com_al">
                                <img :src="require('@/assets/images/taxation/icon_sj_fk2.png')" />
                            </div>
                            <div class="b_com_ar">
                                <p><b>1286</b><sub>亿元</sub></p>
                                <span>涉嫌异常金额</span>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
            <div class="map_select">
                <h5>选择指标</h5>
                <ul>
                    <li><a href="#">涉嫌异常数量</a></li>
                    <li class="on"><a href="#"> 涉嫌异常金额</a></li>
                </ul>
            </div>
            <div class="map_select leg_map" style="left: auto; right: 28%;">
                <p><i style="background: #0277bd;"></i>500以上</p>
                <p><i style="background: #039be5;"></i>300~500</p>
                <p><i style="background: #29b6f6;"></i>200~300</p>
                <p><i style="background: #4fc3f7;"></i>100~200</p>
                <p><i style="background: #81d4fa;"></i>100以下</p>
            </div>
            <div class="sk_boxc fadeInLeft" style="position: absolute; top: 0px; left: 15px; width: 26%;">
                <div class="kuang long_tit">
                    <i class="b_t"></i>
                    <i class="b_t1"></i>
                    <i class="b_l"></i>
                    <i class="b_r"></i>
                    <i class="b_b"></i>
                    <i class="moves1d i_move_t3"></i>
                    <i class="moves1b i_move_t1"></i>
                    <p class="border_title"><span>房地产预收款纳税申报对比</span><a class="tit_enter"></a></p>
                    <div class="k_main" style="height: 410px;">
                        <div class="fk_datacon">
                            <i class="dot1"></i><i class="dot2"></i><i class="dot3"></i><i class="dot4"></i>
                            <table>
                                <tr>
                                    <td>
                                        <span><b>304</b><sub>个</sub></span>
                                        <p>预警数量</p>
                                    </td>
                                    <td>
                                        <span><b>243</b><sub>个</sub></span>
                                        <p>涉嫌异常纳税人</p>
                                    </td>
                                    <td>
                                        <span><b>1308</b><sub>万元</sub></span>
                                        <p>涉嫌异常金额</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br>
                        <div class="tubiao">
                            <EchartLineA height="260px" />
                        </div>
                    </div>
                </div>

                <div class="kuang mT25 long_tit">
                    <i class="b_t"></i>
                    <i class="b_t1"></i>
                    <i class="b_l"></i>
                    <i class="b_r"></i>
                    <i class="b_b"></i>
                    <i class="moves1d i_move_t3"></i>
                    <i class="moves1b i_move_t1"></i>
                    <p class="border_title"><span>税种预警（印花税）</span><a class="tit_enter"></a></p>
                    <div class="k_main" style="height: 410px;">
                        <div class="fk_datacon">
                            <i class="dot1"></i><i class="dot2"></i><i class="dot3"></i><i class="dot4"></i>
                            <table>
                                <tr>
                                    <td>
                                        <span><b>304</b><sub>个</sub></span>
                                        <p>预警数量</p>
                                    </td>
                                    <td>
                                        <span><b>243</b><sub>个</sub></span>
                                        <p>涉嫌异常纳税人</p>
                                    </td>
                                    <td>
                                        <span><b>1308</b><sub>万元</sub></span>
                                        <p>涉嫌异常金额</p>
                                    </td>
                                </tr>
                            </table>
                        </div>
                        <br>
                        <div class="tubiao">
                            <EchartLineA height="260px" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="sk_boxc fadeInRight" style="position: absolute; top: 0px; right: 15px; width: 26%;">
                <div class="kuang long_tit">
                    <i class="b_t"></i>
                    <i class="b_t1"></i>
                    <i class="b_l"></i>
                    <i class="b_r"></i>
                    <i class="b_b"></i>
                    <i class="moves1d i_move_t3"></i>
                    <i class="moves1b i_move_t1"></i>
                    <p class="border_title"><span>土增税项目登记对比</span><a class="tit_enter"></a></p>
                    <div class="k_main" style="height: 380px;">
                        <div class="tubiao">
                            <EchartBarB height="340px" />
                        </div>
                    </div>
                </div>
                <div class="kuang mT25 long_tit">
                    <i class="b_t"></i>
                    <i class="b_t1"></i>
                    <i class="b_l"></i>
                    <i class="b_r"></i>
                    <i class="b_b"></i>
                    <i class="moves1d i_move_t3"></i>
                    <i class="moves1b i_move_t1"></i>
                    <p class="border_title"><span>税种预警（企业所得税）</span><a class="tit_enter"></a></p>
                    <div class="k_main" style="height: 440px;">
                        <div class="sel_ksbox" style="text-align: right; margin-top: -10px; border-bottom: 0;position: relative; z-index: 99;">
                            <div class="ks_groub mB5">
                                <select>
                                    <option selected>企得税季报与土增税预征按季度比对</option>
                                    <option>企得税年报与土增税预征按年比对</option>
                                    <option>企得税年报与增值税预缴按年比对</option>
                                </select>
                            </div>
                            <div class="ks_groub mL10">
                                <select>
                                    <option selected>2018-09</option>
                                    <option>2018-10</option>
                                    <option>2018-11</option>
                                    <option>2018-12</option>
                                    <option>2019-01</option>
                                    <option>2019-02</option>
                                    <option>2019-03</option>
                                    <option>2019-04</option>
                                    <option>2019-05</option>
                                </select>
                                <span>-</span>
                                <select>
                                    <option>2018-09</option>
                                    <option>2018-10</option>
                                    <option>2018-11</option>
                                    <option>2018-12</option>
                                    <option>2019-01</option>
                                    <option>2019-02</option>
                                    <option>2019-03</option>
                                    <option>2019-04</option>
                                    <option selected>2019-05</option>
                                </select>
                            </div>
                        </div>
                        <div class="tubiao" style="margin-top: -30px;">
                            <EchartBarC height="340px" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import EchartLineA from '@/components/echarts/echart_lineA'
import EchartBarB from '@/components/echarts/echart_barB.vue';
import EchartBarC from '@/components/echarts/echart_barC.vue';
import blueMap from '@/views/cases/js/blueMap.json'

export default {
    components: {
        EchartLineA,
        EchartBarB,
        EchartBarC
    },
    data() {
        return {
            //没有设置 center 和 zoom 属性的地图组件是不进行地图渲染的。
            //当center 属性为合法地名字符串时例外，因为百度地图会根据地名自动调整 zoom 的值。
            center: { lng: 0, lat: 0 },
            zoom: 3,
            map: null,
            BMap: null,
            mapStyle: {
                styleJson: blueMap
            },
        }
    },
    methods: {
        //由于百度地图 JS API 只有 JSONP 一种加载方式，因此 BaiduMap 组件及其所有子组件的渲染只能是异步的。因此，请使用在组件的 ready 事件来执行地图 API 加载完毕后才能执行的代码，不要试图在 vue 自身的生命周期中调用 BMap 类，更不要在这些时机修改 model 层。
        handler({ BMap, map }) {
        this.map = map;
        this.BMap = BMap;
        this.center.lng = 113.397552;
        this.center.lat = 22.526454;
        this.zoom = 15;
        },
    }
}
</script>

<style lang="less" scoped>
.bg_a{background: url(~@/assets/images/taxation/bg1.png) repeat; position: relative; width: 1920px; height: 1080px;

    .box_pad{padding: 0px 15px 10px; position: relative;}
    .logo_t{width: 100%; height: 88px; text-align: center; box-sizing: border-box; background: url(~@/assets/images/taxation/logo_bg.png) no-repeat center center; padding-top: 15px;}
    .move_box{width: 450px; height: 73px; position: absolute; top: 0px; left: calc(50% - 225px);}
    .i_move_t {width: 90px;height: 18px;background: url(~@/assets/images/taxation/sy_xl_bg-light.png) no-repeat center center;top: -30px; position: absolute; display: block;}
    .moves1a {animation: 2s linear 0s normal infinite running moves1a;}
    @keyframes moves1a {
        0% {left: 0%;opacity: 0.4;}
        30% {left: 30%;opacity: 1;}
        60% { left: 60%;opacity: 0.6;}
        100% {left: calc(100% - 90px);opacity: 0;}
    }

    .head_nav{display: inline-block; position: absolute; top: 39px;}
    .head_nav li{float: left; margin-left: -20px;width: 193px; text-align: center; position: relative;}
    .head_nav li a{display: inline-block; height:34px ; line-height: 34px; text-align: center; font-size: 18px; color: #8bf8ff; cursor: pointer;}
    .head_nav li.on a,
    .head_nav li:hover a{ color: #ffb821;}
    .head_nav li dl { position: absolute; width: 160px; right: 2px; margin-top: 2px; display: none; transition: all .3s; background: rgba(0, 17, 56, 0.9); border: 1px solid #8ee4f6;}
    .head_nav li dl::before { position: absolute; width: 100%; background-color: transparent; height: 5px; content: ''; left: 0; top: -5px;}
    .head_nav li:hover dl { display: block;}
    .head_nav_l{right: calc(50% + 265px); text-align: right;}
    .head_nav_l li{background: url(~@/assets/images/taxation/head_nav_bg.png) no-repeat center;}
    .head_nav_l li.on,
    .head_nav_l li:hover{background: url(~@/assets/images/taxation/head_nav_bg_on.png) no-repeat center;}
    .head_nav_r{left: calc(50% + 285px);}
    .head_nav_r li{background: url(~@/assets/images/taxation/head_nav_bg1.png) no-repeat center;}
    .head_nav_r li.on,
    .head_nav_r li:hover{background: url(~@/assets/images/taxation/head_nav_bg1_on.png) no-repeat center;}

    .head_nav li dl dd a { display: block; line-height: 40px; height: 40px;}
    .head_nav li dl dd a span { font-size: 16px; display: block; color: #fff; text-align: left; padding-left: 15px; background: url(~@/assets/images/taxation/head_nav%E2%80%94%E2%80%94dd_line.png) no-repeat center bottom;}
    .head_nav li dl dd.on a span { color: #ffb821; background: url(~@/assets/images/taxation/head_nav_dd_on.png) no-repeat; background-size: 100% 100%; border-left: 2px solid #ffb821;}
    .head_nav li dl dd:hover a span { background: url(~@/assets/images/taxation/head_nav_dd_on.png) no-repeat; background-size: 100% 100%; border-left: 2px solid #ffb821;}

    .zhe_top{position: absolute; width: 100%; height: 192px; left: 0px; top: 0px; z-index: 3; background: url(~@/assets/images/taxation/zhe_top.png) no-repeat center top;}

    .top_btn_con { position: absolute; right: 15px; top: 40px; z-index: 999;}
    .top_btn_con a { display: inline-block; color: #00e4ff; font-size: 14px; text-align: center; padding: 0 10px; border-right: 1px solid #2b5696;}
    .top_btn_con a:hover { opacity: 0.9;}
    .top_btn_con a:last-child { border-right: 0;}
    .top_btn_con img {}
    .top_btn_con p { display: inline-block; font-size: 16px; color: #8bfffb;}

    .top_data_cen { width: calc( 100% - 30px ); position: absolute; top: 5px; z-index: 9; text-align: center;}
    .top_data_cen .b_com {  box-sizing: border-box; background: url(~@/assets/images/taxation/cen_com_bg.png) repeat-x; background-size: auto 100%; min-width: 40%; max-width: 44%; display: inline-block; text-align: left; min-height: 123px; position: relative;}
    .top_data_cen .b_com::before,
    .top_data_cen .b_com::after { content: ''; position: absolute; width: 10px; height: 100%; top: 0;}
    .top_data_cen .b_com::after { background: url(~@/assets/images/taxation/cen_com_r.png); right: -10px; background-size: 100% 100%;}
    .top_data_cen .b_com::before { background: url(~@/assets/images/taxation/cen_com_l.png); left: -10px; background-size: 100% 100%;}
    .b_com dl { text-align: center; padding-bottom: 5px;}
    .b_com dd { display: inline-flex; margin: 5px 20px; position: relative;}
    .b_com dd::after { content: ''; position: absolute; width: 1px; height: 36px; background: url(~@/assets/images/taxation/cen_com_line.png) no-repeat; top: 50%; margin-top: -18px; right: -22px;}
    .b_com dd:last-child::after { display: none;}
    .b_com dd p { font-size: 24px; color: #ffb821; font-family: Digiface; margin: 0; text-align: left;}
    .b_com dd p sub { font-size: 16px; font-family: "Microsoft YaHei"; bottom: 0;}
    .b_com dd span { font-size: 16px; display: block; color: #fff; line-height: 16px;}
    .b_com dd p b { font-weight: normal;}
    .b_com_al{
        display: inline-flex;
        flex-direction: column-reverse;
        margin-right: 10px;
    }
    .sel_ksbox { padding: 10px 0; text-align: center; border-bottom: 1px solid #022283;}
    .sel_ksbox .ks_groub { display: inline-block; text-align: left; vertical-align: top;}
    .sel_ksbox .ks_groub span { color: #00c5e8; font-size: 16px; padding: 0 2px;}
    .sel_ksbox .ks_groub select { border-radius: 3px; border: 1px solid #5ca6c3; min-width: 92px; height: 30px; font-size: 16px; color: #fff; background: #080a21; padding: 0 5px;}

    .map_select { position: absolute; background: url(~@/assets/images/taxation/map_select_bg1.png) no-repeat; width: 125px; box-sizing: border-box; padding: 1px; min-height: 100px; left: 28%; top: 700px;}
    .map_select::after { content: ''; position: absolute; width: 100%; height: 5px; background: url(.~@/assets/images/taxation/map_select_bg2.png); background-size: 100% 100%; bottom: -5px; left: 0;}
    .map_select h5 { text-align: center; font-size: 15px; color: #8bfffb; height: 32px; line-height: 32px; font-weight: normal; background: url(.~@/assets/images/taxation/map_select_line.png) no-repeat center bottom;}
    .map_select ul { text-align: center; font-size: 16px; margin-bottom: -4px;}
    .map_select ul li a { color: #fff; display: block; line-height: 24px; padding: 5px 0;}
    .map_select ul li.on a { color: #fdad13; background: url(~@/assets/images/taxation/map_select_on.png); background-size: cover;}
    .map_select ul li:hover a { background: url(~@/assets/images/taxation/map_select_on.png); background-size: cover;}

    .leg_map p{color: #fff; font-size: 16px;padding: 4px 0px;padding-left: 10px; margin: 0;}
    .leg_map p i{display: inline-block; width: 14px; height: 14px; box-shadow: 0 0 3px rgba(255,255,255,0.5); border-radius: 50%; margin-right: 10px;}

    .sk_boxc{z-index: 10;}

    .kuang { width: 100%; padding: 30px 20px 20px; box-sizing: border-box;}
    .kuang .b_t{display: block; width: calc(100% - 40px); position: absolute; top: 0px; left: 0; height: 30px; background: url(~@/assets/images/taxation/border-top-long.png) repeat-x left top;}
    .kuang .b_t1{display: block; width: 40px; position: absolute; top: 0px; right: 0px; height: 30px; background: url(~@/assets/images/taxation/border-top1.png) repeat-x center top;}
    .kuang .b_l{display: block; height: calc(100% - 30px); position: absolute; top: 30px; left: 0px; width: 20px; background: url(~@/assets/images/taxation/border-left.png) no-repeat center bottom;}
    .kuang .b_r{display: block; height: calc(100% - 30px); position: absolute; top: 30px; right: 0px; width: 20px; background: url(~@/assets/images/taxation/border-right.png) no-repeat center bottom;}
    .kuang .b_b{display: block; width: calc(100% - 40px); position: absolute; bottom: 0px; left: 20px; height: 20px; background: url(~@/assets/images/taxation/border-bottom.png) repeat-x center top;}
    .kuang .b_b1{display: block; width: 20px; position: absolute; bottom: 0px; left: 0px; height: 20px; background: url(~@/assets/images/taxation/border-bottom1.png) no-repeat left top;}
    .kuang .border_title { position: absolute; width: 100%; height: 53px; background: url(~@/assets/images/taxation/border_title_long.png) no-repeat left center; top: 0; left: 0; line-height: 50px; font-size: 20px; color: #00fffc; z-index: 99; box-sizing: border-box; padding-left: 10px;}
    .kuang .border_title span { font-weight: 600; background-image:-webkit-linear-gradient(top,#fff,#61e7ff); 
        -webkit-background-clip:text; 
        -webkit-text-fill-color:transparent;
    }
    .kuang .k_main{background: rgba(0, 17, 56, 0.75); width: 100%; min-height: 100%; position: relative; padding-top: 30px; box-sizing: border-box;}

    .tit_enter { position: absolute; width: 23px; height: 26px; background: url(~@/assets/images/taxation/tit_enter.png); cursor: pointer; top: 26px; right: 15px;}
    .tit_enter:hover { background: url(~@/assets/images/taxation/tit_enter_on.png);}
    .fk_datacon { background: rgba(0, 14, 65, 0.6); border: 1px solid #003f8c; padding: 6px; position: relative; box-sizing: border-box;}
    .fk_datacon > i { display: block; position: absolute; width: 6px; height: 6px;}
    .fk_datacon > i.dot1 { background: url(~@/assets/images/taxation/dotimg1.png); top: -1px; left: -1px;}
    .fk_datacon > i.dot2 { background: url(~@/assets/images/taxation/dotimg2.png); top: -1px; right: -1px;}
    .fk_datacon > i.dot3 { background: url(~@/assets/images/taxation/dotimg3.png); bottom: -1px; right: -1px;}
    .fk_datacon > i.dot4 { background: url(~@/assets/images/taxation/dotimg4.png); bottom: -1px; left: -1px;}
    .fk_datacon table { width: 100%; text-align: center; font-size: 16px; color: #fff;}
    .fk_datacon table td { background: url(~@/assets/images/taxation/cen_com_line.png) no-repeat right center;}
    .fk_datacon table td:last-child { background: none;}
    .fk_datacon table td span { color: #ff5a79; font-size: 22px; font-family: Digiface;}
    .fk_datacon table td span b { font-weight: normal;}
    .fk_datacon table td span sub { font-size: 15px;}
}

.kuang{display: inline-block; position: relative; padding: 20px; z-index: 99;}

.moves1a { animation: 2s linear 0s normal infinite running moves1a;}
.moves1b { animation: 2s linear 0s normal infinite running moves1b;}
.moves1c { animation: 2s linear 0s normal infinite running moves1c;}
.moves1d { animation: 2s linear 0s normal infinite running moves1d;}
.i_move_t{width: 90px; height: 18px; background: url(~@/assets/images/taxation/sy_xl_bg-light.png) no-repeat center center; top: -7px; display:block; position: absolute;}
.i_move_t1{width: 90px; height: 18px; background: url(~@/assets/images/taxation/sy_xl_bg-light.png) no-repeat center center; top: -30px; right: -45px; transform: rotate(90deg); display:block; position: absolute;}
.i_move_t2{width: 90px; height: 18px; background: url(~@/assets/images/taxation/sy_xl_bg-light.png) no-repeat center center; bottom: -6px; display:block; position: absolute;}
.i_move_t3{width: 90px; height: 18px; background: url(~@/assets/images/taxation/sy_xl_bg-light.png) no-repeat center center; bottom: 30px; left: -43px; transform: rotate(90deg); display:block; position: absolute;}
@keyframes moves1a {
	0% {
		left: 0%;
		opacity: 0.6;
	}
	30% {
		left: 30%;
		opacity: 1;
	}
	60% {
		left: 60%;
		opacity: 0.6;
	}
	100% {
		left: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1b {
	0% {
		top: 0%;
		opacity: 0.4;
	}
	30% {
		top: 30%;
		opacity: 1;
	}
	60% {
		top: 60%;
		opacity: 0.6;
	}
	100% {
		top: calc(100% - 30px);
		opacity: 0;
	}
}
@keyframes moves1c {
	0% {
		right: 0%;
		opacity: 0.6;
	}
	30% {
		right: 30%;
		opacity: 1;
	}
	60% {
		right: 60%;
		opacity: 0.6;
	}
	100% {
		right: calc(100% - 90px);
		opacity: 0;
	}
}
@keyframes moves1d {
	0% {
		bottom: calc(0% + 45px);
		opacity: 0.4;
	}
	30% {
		bottom: 30%;
		opacity: 1;
	}
	60% {
		bottom: 60%;
		opacity: 0.6;
	}
	100% {
		bottom: calc(100% - 30px);
		opacity: 0;
	}
}

.bm-viewbm-view {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/deep/.anchorBL {
  display: none;
}
</style>